<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul id="list">
        <li>lorem</li>
        <li>lorem</li>
        <li>lorem</li>
        <li>lorem</li>
        <li>lorem</li>
    </ul>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"></script>
    <script>
        $(function () {
            // 曾经是王者荣耀，但现在英雄迟暮，魔兽世界
            // 理念和代码还是要学习，用来开发小功能还是有用
            // 只是因为它不适合现在这种模块化开发方式

            //学习方式：掌握关键API,其他方法在用的时候查阅文档即可

            //===== 什么是Jqurey
            // 对DOM进行了比较成熟的封装，简化了我们对DOM的操作
            let li = document.getElementsByTagName('li');
            console.log(li[0]);
            for (let i = 0; i < li.length; i++) {
                li[i].style.color = 'red';
            }

            //使用方式 引入Jqurey  bootCDN
            $('li').css('color', 'blue')

            //====== jQuery的核心
            // 1.jQuery() ---->$()
            //构建jQuery对象，只要把原生对象放进$()中，就会变成jQuery对象，
            //从而可以使用jQuery对象的相关方法

            $('#list').css('background-color', 'pink');
            //将标签转变成jquery对象
            $(document.body)
            //将数组转成jquery对象
            $([1, 2, 3])
            //实际就是创建了一个标签
            $('<p></p>')

            // 2.each() 类似于数组的forEach方法,注意参数顺序是相反的
            // let arr = [1, 2, 3];
            // arr.forEach((item,index)=>{})
            $('li').each((index, item) => {
                console.log(index);
                console.log(item);//原生的节点对象
                //如果这个item想要用jquery的方法，就需要放到$()中   
            })

            // get() 把jquery对象转成原生对象
            // console.log($('li').get());
            $('li').get().forEach((item) => {
                item.innerHTML += 'test'
            })
            $('li').get(1).innerText = '通过下标访问某一个节点'


            // 3.$(document).ready(function(){})---->$(function(){})
            //这个方法类似于window.onload
            //不同点：window.onload是等所有的html、css以及图片都加载完毕才开始执行
            //而$(function(){})只会等html和css加载完毕就执行

            function foo() {
                var a = 10;
            }

            function fn() {
                var a = 'abc';
            }
        })

    </script>

</body>

</html>